Las fechas navideñas no sólo remueven sentimientos también alteran nuestras actividades, nuestro horario y como no, nuestro blog.
Rosa nos hablaba el otro día sobre la forma de añadir un bonito efecto de nieve creado con un script de DynamicDrive
Otro efecto que me ha gustado mucho es el de Claudia de Girly Bogger es elegante y como ella bien puntualiza poco invasivo.
Siguiendo en la línea de efectos para el blog y también de la página de DynamicDrive es el efecto Floating images el autor Virtual Max ha creado un efecto suave de imágenes flotando.
A cualquiera de estos scripts podemos cambiarles las imágenes para que se adapte según las fechas o la temática como en este caso que sustituí los globos por iconos navideños.
Podemos añadir este efecto si nos situamos al final de la plantilla justo antes de </body>
"El siguiente script lo podéis descargar desde aquí o de la página del autor moveobj.js"

<script src='url-archivo-imagenflotante.js' type='text/javascript'> </script>

Justo después añadimos:
<script type='text/javascript'>/************************************************ Floating image script- By Virtual_Max (http://www.geocities.com/siliconvalley/lakes/8620)* Modified by Dynamic Drive for various improvements* Visit Dynamic Drive at http://www.dynamicdrive.com/ for full source code***********************************************///Step 1: Define unique variable names depending on number of flying images (ie:3):var flyimage1, flyimage2, flyimage3function pagestart(){//Step 2: Using the same variable names as 1), add or delete more of the below lines (60=width, height=80 of image):flyimage1=new Chip("flyimage1",47,68);flyimage2=new Chip("flyimage2",47,68);flyimage3=new Chip("flyimage3",47,68);//Step 3: Using the same variable names as 1), add or delete more of the below lines:movechip("flyimage1");movechip("flyimage2");movechip("flyimage3");}if (window.addEventListener)window.addEventListener("load", pagestart, false)else if (window.attachEvent)window.attachEvent("onload", pagestart)else if (document.getElementById)window.onload=pagestart</script>

Guardamos los cambios y nos situamos en plantilla de diseño para añadir un gadget escogemos la pestaña HTML/Javascript y en su interior añadimos lo siguiente:
<div id="flyimage1" style="position:absolute; left: -500px; width:47; height:68;"><a href="#"><img border="0" src="http://4.bp.blogspot.com/_q4j3j-JA2ro/STa6_10Y23I/AAAAAAAAGbo/ne4twN4aD4I/s000/bell.png"/></a></div><div id="flyimage2" style="position:absolute; left: -500px; width:47; height:68;"><a href="#"><img border="0" src="http://1.bp.blogspot.com/_q4j3j-JA2ro/STa7y4fhIiI/AAAAAAAAGcI/6gQcJHJrWjk/s000/santa.png"/></a></div><div id="flyimage3" style="position:absolute; left: -500px; width:47; height:68;"><a href="#"><img border="0" src="http://2.bp.blogspot.com/_q4j3j-JA2ro/STa7Jgqn1rI/AAAAAAAAGb4/K5qatZIZP48/s000/star.png"/></a></div>

En color azul es la url de las imágenes que podemos sustituir por cualquier otra, recomiendo que el tamaño no sea demasiado grande de lo contrario entorpecería la lectura del blog, otra idea sería añadir una sola imagen para ello bastaría con omitir el div que la añade, es decir sería suficiente con añadir:

<div id="flyimage1" style="position:absolute; left: -500px; width:47; height:68;"><a href="#"><img border="0" src="http://4.bp.blogspot.com/_q4j3j-JA2ro/STa6_10Y23I/AAAAAAAAGbo/ne4twN4aD4I/s000/bell.png"/></a></div>

Y en el script:
movechip("flyimage1");

Para añadir más imágenes sería a la inversa, añadimos al elemento de página una imagen más por ejemplo:
<div id="flyimage4" style="position:absolute; left: -500px; width:47; height:68;"><a href="#"><img border="0" src="http://4.bp.blogspot.com/_q4j3j-JA2ro/STa6_10Y23I/AAAAAAAAGbo/ne4twN4aD4I/s000/bell.png"/></a></div>

Y en el script:
movechip("flyimage4");

Las imágenes las podemos sustituir simplemente suprimiendo la parte de color azul y en su lugar añadiendo la url de vuestras imágenes.
También podemos hacer que esas imágenes sean un enlace para ello añadiremos la url de la página a enlazar sustituyendo el asterisco # (respetando las comillas)



Anónimo

Si hubiera venido antes!!!...se puede colocar otras imágenes como los globos, es el cumple de uno de los pekes!!!...a tenerlo en cuenta...besitos Gema!!!

Responder
Jaime Trujillo Escobedo

Muy lindo el efecto Gem@!! la verdad es que queda muy bien con el decorado navideño, saludos :)

Responder
PIRI

hola te queria preguntar que yo si estoy en mi blog en picasa hay fotos de mis trabajos
pero si quiero pasarla para que se vean no tengo idea como se hace
yo no las he puesto en picasa como se han puesto?
ademas todo el mundo tiene acceso a verlas?
gracias

Responder
Gem@

Se puede poner cualquier imagen Graciela preferiblemente de fondo transparente, hay muchos y bonitos motivos para añadir, nubes, estrellas... yo añadí tres imágenes distintas para el ejemplo pero con as tres iguales queda en mi opinión mucho más fino.

Gracias Jaime :)

Piri todas las imágenes que subes a Blogger automáticamente van a Picasa pero no es como tener un álbum al que puedes restringir las visitas y hacerlo privado.
Si tu preocupación es que tus imágenes sean públicas fuera de tu blog te diré que en Google puedes verlas todas.
Haz la prueba y escribe en Google el nombre de tu blog luego clica arriba en imágenes.

Responder
Liz Marin

genial como siempre gema ,muchas gracias


besittosss

Responder
Gem@

A ti Elisabeth :)

Responder
Michael Norambuena

Paso a saludar Gem@...despues de tanto tiempo corresponde un saludito de vez en cuando no? Un abrazo enorme y muchos cariños !! desde Chile.

Responder
Anónimo

Blog muy copado, gracias por las herramientas.

Responder
Jorge Key/Raws

buen truco pero si quisieramos agregar otra imagen?

como quedaria el javascript y los divs

Responder
Jorge Key/Raws
Este comentario ha sido eliminado por el autor.
Responder
Jorge Key/Raws

aumentar

flyimage4

flyimage4=new Chip("flyimage4",47,68);


movechip("flyimage4");

div id="flyimage4"


bueno creo eso se debe añadir o nop?
jeje

es que quisiera cuatro imagenes jeje
dos pares
saludillos
espero tu pronta y eficaz respuesta

Responder
Anónimo

Hola gema recurro ati otra ves mira el problema es que cuando intento poner Ultimos comentarios no sale no se por que ya probado de todo pero no se que hacer gracias de antemano

Últimos comentarios con..."Fecha,nombre,título de la entrada, y un breve resumen"

a eso me refiero

Responder
Anónimo

Empieza a instalarse ya por todos los blogs de una manera u otra el "espiritu navideño", buen post.
Saludos

Responder
Charo Bolivar

Hola Gema, tengo un houston, si abro mi pagina con firefox no veo los efectos, en IE si. Es cosa de la seguridad de firefox, ¿no?

Besos

Responder
Gem@

Cariños también para ti Michael, gracias por dejar una prueba de haber estado aquí ;)

Gracias a ti también Emiliano :)

Jorge el script no habría que tocarlo, habría que añadir en html otro nuevo div para la imagen 4:
<div id="flyimage4" style="position:absolute; left: -500px; width:47; height:68;"><a href="#"><img border="0" src="url-imagen"/></a></div>

P2P comprueba si el alojamiento del script está online, si añadiste la url del script bien y por último si has sustituido la url de mi blog por la tuya.
Debería verlo instalado para decirte por qué no funciona.

Así es Sisco :)

Charo si te refieres al efecto nieve lo veo con los dos navegadores :O
Hay script que no se visualizan en Firefox pero este en concreto si.

Responder
tatii

muchisimas gracias por el dato!
como veraz ya lo utilice para mi blog (:
gracias gema!

Responder
Charo Bolivar

Pues yo no lo veo en firefox, solo en IE, debe ser algún problemilla de seguridad que tengo. He añadido unas imágenes flotantes a Diario de otoño y me ocurre lo mismo. Echales un vistazo a ver que tal las ves.

Gracias

Responder
Flores Literarias

hola Gem@, sos un a verdadera joy@... he estado buscando en varias entradas cómo añadir otros tipos de letra a la sidebar fuera de los que ofrece la plantilla bloger. Me explico, hay un tipo de letra que deseo aparezca en los títulos de la sidebar pero como vez no sé cómo hacerlo... supongo que ya lo has explicado y debe ser de lo más sencillo, puedes remitirme a la entrada donde describes cómo hacerlo.... mil abrazos.

Responder
Flores Literarias

otra vez yo... gemit@, especificamente deseo que los títulos de la sidebar tengan este tipo de letra Edwardian Script ITC..

chaito

Responder
Prof. Cristian E. Moyano

Hola gem@ soy Cristian, me encanta tu blog! me haz ayudado bastante y te doy las gracias..Me gustaría que me digieras como hago una tabla de contenidos como la tuya? lo que he tratado de hacer es con este código:
(a href="http://solobajistas.blogspot.com/search/label/?max-results=999")Todo el Contenido)(/a)
Lo he puesto entre parentesis para que lo puedas ver (creo que ya lo sabes) pero lo que quiero es que solo salgan los títulos de sus respectivas entradas ordenadas alfabeticamente, me podés ayudar?

Desde ya muchas gracias y te felicito por tu exitoso blog!!

Responder
Gem@

Ese efecto de nieve me encanta Tatii y con el fondo más oscuro queda precioso.

Charo también las veo, pulsa la tecla f5 y control al mismo tiempo para actualizar la página puede ser eso.
También puede sprobar a añadir los dos script justo antes de </head> si con esas dos comprobaciones no lo ves entonces lo más probable que tu versión de Firefox no esté actualizada.

Flores literarias ese tipo de letra no lo admite Blogger pero tratandose de los títulos de la sidebar puede hacerse con un editor de imágenes, más o menos como si hiciéramos un botón para los títulos.
Si te decides debo recordarte que la imagen no debe medir más que la sidebar.

Cristian la tabla de contenidos que yo tengo trabaja con un script, no hice entrada alguna sobre ello y es larguísimo de explicar por lo que te recomiendo visitar a TextoVagabunda que es la fuente de información y lo explica con lujo de detalles.
No he podido localizar esa entrada en su blog quizás tu tengas más suerte ;)

Responder
Carlos Pizcos

mmmm..hola madrina...una pregunta tonta ¿no estas en technorati?..necesito un thumbnails tuyo y no te encuentro alli...☺☺☺

Responder
Gem@

Technorati no me quiere Pizcos no le gusta el guión de mi url :(
Pero puedes coger el que quieras en sky Drive.
¿Te refieres a thumbnailviewer?

Responder
Carlos Pizcos

es para hacerte "publi" por no currarme un thumbnails de tu blog...ya mañana lo hare...me falta el tuyo y el de Fernando que tampoco esta...

Responder
Gem@

Siempre inventando :)

Responder
Admin

Gem@ el efecto nieve de Charo si lo veo con FireFox, pero en el otro blog las imagens flotantes no las veo, a lo mejor es el Adblock de FF, voy a probar de desactivarlo a ver que pasa...

Responder
Gem@

Tardan un poquito pero si salen...

Responder
Admin

Le desactivé el Adblock Plus y en el blog de Yesi si las veo,(cuando estaba activado no) pero en el de Charo que tarda muuucho en cargar, Diario de Otoño, no veo las imagenes cuando termina de cargar tampoco.

Ahhhh... ahora si,(que cabezona que soy, insisto, insisto... ja ja) le di a f5 y si aparecieron las imagenes, pero tiene que desactivar el Adblock, sinó no salen ehh...

Responder
Anónimo

ok gemma gracias voy a intentar denuvo gracias

Responder
Gem@

Gracias ahijado :)

k_nelita eres toda una maestra y estás en todas partes jajajaja al tener el correo abierto me llegan actualizaciones de comentarios tuyos aquí y allá.

Suerte P2P ;)

Responder
Admin

Soy como la mugre gem@ estoy en todos lados ja jaaaaa :D
Trabajo con el correo abierto también y donde veo algo que me interesa me meto juaaa, creo que estoy suscripta a los comentarios de toda la blogosfera jajaaaaj jaaaaaa :D

Responder
Emerald

Gema gracias por este truquito, ya lo puse :D
jaja una se contagia con todo esto del concurso y la decoración navideña, eso que la temática de mi blog no da para esto!jaja
Saludos

K-nelita siempre me haces reir!!!!

Responder
Gem@

Ya veo ya... K_nelita pero nunca haría esa comparación contigo ¡Qué cosas tienes mujer!

LuzdeLuna leíste mi pensamiento sobre la aplicación de este efecto, quedó lindo y elegante, en su justa medida ;)

Responder
Admin

Gem@ este script sería compatible con el de la nieve? Como van los dos antes de /body, por ahí crea conflicto, que crees?
Te pregunto pero igual voy a probar, ya sabés como soy...

Lo de la mugre se usa mucho aquí, no es malo, es como decir "el perejil de todas las salsas", no se si usan eso en España?

Besote ;)

Responder
Gem@

No he probado los dos k_nelita pero si lo intentas y crea conflicto también puedes añadir uno antes de /head.
La definición de mugre es algo desagradable, aquí solemos decir "Estás hasta en la sopa" como diciendo que por muy extraño que sea el sitio allí está siempre.

Responder
Admin

Si, ahora veo donde pongo el script, tengo que alojar la imagen todavía...
Y ver en que blog voy a poner ese efecto, ja ja todo me gusta y después no se donde ponerlo...

Si, tienes razón es un poco feo lo de mugre, también decimos lo de la sopa, aunque en mi casa nadie toma ja ajjaa somos como Mafalda ja jaa Sopa puajjjjj!! :D

Responder
Admin

Ya está, aparentemente no hay conflicto de scripts, creo, porque quise agegarle una 4º imagen ya que son muy pequeñitas, casi tanto como los copitos de nieve y no me acepta la cuarta o sea no se ve..., en realidad quería ponerle 5 pero si no me acepta 4 que puede ser??
Puse el div todo como dices, o sea copie el anterior y le cambié el nº de 3 a 4, que será?? :o

A Pizcos Blogger ya le hizo el regalito de Navidad sabías? Le funciona el vista previa!
Acá no :(

Responder
Admin

Gem@ sabés, estuve mirando el script y pone solo 3 imagenes, estás segura que no hay que tocarlo para agregarle mas?
Porque está bien definido, dice image 1 imge 2 imge 3, tal vez por eso no acepte mas... que crees??

Responder
Admin

Lo logré!!!! Aleluya!!! :D Le modifiqué el script puse 5 imagenes y ahora si se ven las cinco, soy una genioooo!!! Que humilde ja jaaaaaa, mas que genio audáz diría yo, no? jajjaaaaa :D
Mira Aquí
Cuando puedas miralo y dame tu opinión si?

Besitos ;)

Responder
Gem@

Siento tardar tanto k_nelita ando saturada estos días pero veo que eres una genia de las grandes :)
Quedaron bien lindas las estrellitas :)

Responder
Unknown

como siempre GEM@, me parecen tus entradas excelentes.
Pero sabes que me gustaria que me explicaras(no se si ya lo tengas), es cambiar el icono de blogger por uno personalizado, lo he intentado mucho y no he podido.

gracias

Responder
Admin

Viste gem@ como me las rebusqué?? Soy una chapucera ja jaa, le metí mano al script, y al html, me la jugué, total dije si sale mal lo borro y listo, pero me salió bien ja ajaja. :D Estoy pensando en ponerle mas estrellitas, que te parece? Son tan chiquitas que creo que no son molestas no?
Le saqué la nieve, me parecía mucho, aunque no se, ahora la extraño, que opinás?
Como acá no hay nieve en estas épocas, bueno en mi ciudad en ninguna ja jaa creo que nevó dos o tres veces en la historia.
Querés que te haga envidiarme? Hoy hace 32º de temperatura ja jaa
Yo los envidio a ustedes cuando acá me muero de frío ja jaa :D

Responder
Gem@

Está muy lindo de verdad k_nelita y es algo tan imperceptible que si añades más no molesta la lectura.
Aquí tenemos un invierno bastante bueno pero últimamente pasamos de un día caluroso a otro de mucho frío esos cambios no son buenos, y tampoco vemos la nieve por esta zona :)

Responder
Gem@

Hola Migue no me di cuenta de tu comentario disculpa...
Ese icono de la barra e navegación te refieres ¿verdad? lo puedes cambiar siguiendo estos pasos:
Sobre favicón

Responder
AFUA

Gema,
Pues yo querría poner los globos, me podrias decir, soy muy novata.
Gracias

Responder
Gem@

Hola Pilar si te refieres a los globos de los comentarios mira esta entrada y sigue paso a paso las explicaciones. Cualquier duda me lo dices ;)

Responder
AFUA

No, me refiero a los globos que dices que sustituiste en este efecto flotante, yo quería los globos en vez de los motivos navideños.
gracias

Responder
Gem@

imagen1

imagen2

imagen3

Ahí van las imágenes Pilar.

Responder
jabón jabón

ya tengo los globos pero querría que no flotasen tan rápido.
Saludos
pilar

Responder
Gem@

Mira bien la plantilla Pilar poque creo que añadiste el script varias veces.

Responder
jabón jabón

Ya lo arreglé, aunque y van mejor pero prefería que fuesen un poco mas lentos.
Muchas gracias.
pilar

Responder
jabón jabón

¿Porqué, algunas veces entro en el blog y no se ve el efecto flotante y si vuelvo a entrar sí se ve?
habré hecho algo mal, pero no sé el qué.
graciñas
pilar

Responder
Juan Martínez

Hola Gema. Muy chévere el javascript... pero me gustaría hacerte una pregunta.

¿Cómo hago para que en mi diseño de blgger aparezca no las tres figuras flotando sino en "santa" que tienen en tu blog a la derecha?

Me parece más atractivo...

Gracias

http://casateatrodepopayan.blogspot.com

Responder
Gem@

Pilar suele pasar que las imágenes no se muestran hasta que termina de cargar la página completamente.

Hola Juan Carlos yo puse a santa pero podría ser cualquier imagen. En realidad antes de Santa tenía una flecha que al clicar te lleva a INICIO, lo que hice fue cambiar la url de la imagen nada más.
Para añadirlo sin efecto, simplemente que nos lleve a INICIO mira aquí
Si prefieres ese efecto deslizante puedes ver como hacerlo aquí

Responder
Admin

En uno de mis blogs, Te Propongo, me pasa lo mismo que a Pilar, y si lo dejo que termine de cargar ehh, hasta que no le doy a f5 no salen la imagenes, en el otro si salen de entrada nomás, cuando termina la carga.
Me fijé por si fuera la ubicación del script, pero no, en la plantilla está en el mismo lugar en uno y en otro, los html, están mas o menos en la misma ubicación también, no se que será, también noté eso en otros blogs.

Responder
Gem@

Se puede probar a añadir el script antes de </head> y ver el resultado.

Responder
Admin

Pués probeeeemosss ja jjaa :D
Ya te cuento ;)

Responder
jabón jabón

ya cambié el script y nada no carga a la primera.
k_nelita ¿tu lo conseguiste? ....con lo que me gustaba

Responder
Admin

No, no :( cambié el script justo antes de /head, y también cambié el html un poquito mas abajo de la sidebar y la primera vez si lo cargó de entrada, pero después ya no, hay que darle al f5 para que salgan :(

Y si pongo el html al final de la sidebar? Que opinas? Ahora lo tengo en el segundo elemento de página, hace un rato lo tenía en el primero, funcionará abajo? :o

Responder
Admin

Lo voy a mirar con Explorer a ver que dice el mal...|O

Responder
AFUA

k-nelita, yo ya cambie el html de sitio también y nada no va la primera. A ver si averiguas algo

Responder
Admin

No, no hay caso, en Explorer con la rapidés que lo caracteriza :o no se ven, ni dandole al f5 ni ctrl + f5 ni nada, no sale las imagenes :( o es mi Explorer o no funciona.

No cambié el html porque esperaba alguna opinión de gem@, pero si dices que no va... ya no se que pueda ser... :(

Alguien que opine al respecto a ver como lo ven, a lo mejor son nuestros navegadores... ya no se que pensar...

Responder
Gem@

Veamos... según la página del autor del script debe verse con Explorer 4 y superiores.
El motivo por el que no se visualiza tengo que mirarlo.
Por otra parte k_nelita en Te propongo lo veo muy bien con Firefox quiero decir que carga rápido añadido antes de </head>.
En Folk Tango más de lo mismo.

Pilar en el tuyo no se ven con Firefox tampoco porque el script lo añadiste antes de <head>
Intenta añadirlo antes de </head> o antes de </body> la diferencia es que la etiqueta está cerrada.
<head> no sino </head>

Responder
Gem@

Me olvidaba... Pilar en tu blog tal y como está si se visualiza con Explorer es de locos esto jajajaja

Responder
Admin

Gem@ mirando las plantillas de Pilar y Jabón jabón, son la misma persona? :o
bueno eso que miraba el código fuente de las dos plantillas y veo el código puesto antes de /head, sin embargo no puedo ver las imagenes a menos que le de a f5.
No estoy muy acostumbrada a encontrar cosas en el código fuente, allí no se ve lo que está en la sidebar no?
Porque no puedo ver donde tienen el html :o
Y con respecto a Te Propongo vos decís que las ves con FireFox, pero yo no, y eso que anoche se actualizó...
En FolkTango si, ahí en ningún momento me dio problemas y está antes de /body, ya no entiendo mas nada :O
Y con Explorer que pasa? yo no veo nada :o

Responder
jabón jabón

Si soy la misma Knelita

Responder
Gem@

k_nelita en el código fuente lo que tenemos añadido en la sidebar lo veremos dentro de un div. "<div class='..." la mejor forma de localiarlo es hacerlo con el título de la sidebar donde se encuentra. En el código fuente podemos ver todo, menos... lo que se llama códigos condicionales que son esos que sólo vemos si expandimos la plantilla.
El visualizar algunas cosas con diferente navegador y conseguir que se vea igual en Firefox y Explorer es algo que trae mucha cola como decimos aquí.
Lo que si está claro es que si en un blog se ve en otro también debe verse :O
Me daré una vuelta y te digo como está ahora.

Responder
Admin

Hola Gem@, quería poner otra vez este efecto en uno de mis blogs, tal como me diste el enlace de esta entrada, pero no funciona ya la descarga del script? :o
Igual me gustaría ponerlo entero dentro de la plantilla, ya no alojarlo como antes, me darías una mano con esto?
No me acuerdo de nada :( está bien que pasaron dos años pero... Me estaré poniendo grande? :D

Un besote guapísima ;)
En serio que estás muy guapa ehh esa foto que has puesto en el footer estás muy linda :D

Responder
Admin

Gem@@@@ ya lo logré!!! Ja jaja :D no estoy tan viejaaa, pude hacer todo, ya tengo estrellitas de colores en Te Propongo... ;)
Gracias igual, tu blog me sirve aunque no estès :D
Claro que si estás mejor ;)
Te quiero Gem@@@!!

PD: Espero que se vea bien en todos los navegadores, acá lo estoy viendo con Chrome. Ahh mi hijo está en la pc de escritorio con FireFox y también las ve, el asunto será saber si se ven en IE...

Besoteeeessss ;)

Responder
Gem@

:: Estupendo knelita!! con Excplorer 8 he probado y se ven muy bien :)

La foto es una del concurso, ohhh estaba tan contenta que creo que se reflejaba en la cara.
Van a tener que darme un premio todos los días para estar guapa jajajajaja
Besotes amiga yo también te quiero!!

Responder

Los comentarios han sido inhabilitados temporalmente. ¡GRACIAS!

:):'(:(:P:D:$;):-I:X:O|O:S

Nota: solo los miembros de este blog pueden publicar comentarios.

 


top